<template>
  <div class="box">
    <el-button type="primary" @click="add">添加角色</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row v-for="item in props.row.children" :key="item.id" style="display:flex">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-tag>{{ item.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </div>
            </el-col>

            <el-col>
              <el-row v-for="obj in item.children" :key="obj.id">
                <el-col :span="5" >
                  <div class="grid-content bg-purple" >
                    <el-tag
                      type="success"
                      closable
                      @close="handleClose(obj, props.row.id)"
                      >{{ obj.authName }}</el-tag
                    >
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
                <el-col :span="19"
                  ><div>
                    <el-tag
                      type="warning"
                      v-for="tag in obj.children"
                      :key="tag.authName"
                      closable
                      @close="handleClose(tag, props.row.id)"
                      >{{ tag.authName }}</el-tag
                    >
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="名称" prop="roleName"> </el-table-column>
      <el-table-column label="描述" prop="roleDesc"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="bj(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-setting"
            @click="permissions(scope.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加角色模态框 -->
    <el-dialog title="新增角色" :visible.sync="dialogVisible" width="50%">
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="ruleForm.roleName"
            placeholder="该项不能为空"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="qAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑角色模态框 -->
    <el-dialog title="修改角色" :visible.sync="dialogVisible1" width="50%">
      <!-- 表单 -->
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm1.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm1.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="qEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog title="分配权限" :visible.sync="dialogVisible2" width="50%">
      <!-- 节点树tree -->
      <el-tree
        :data="data"
        show-checkbox
        :props="defaultProps"
        node-key="id"
        :default-checked-keys="ids"
        ref="tree"
      ></el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="qUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      data: [], //权限列表
      // 更改属性名,把label改成authName
      defaultProps: {
        label: "authName",
      },
      tableData: [], //角色列表数据
      dialogVisible: false, //添加角色模态框开关状态
      dialogVisible1: false, //编辑角色模态框开关状态
      dialogVisible2: false, //分配角色权限模态框开关状态
      // 添加角色信息
      ruleForm: {
        roleName: "",
        roleDesc: "",
      },
      // 编辑角色信息
      ruleForm1: {
        roleName: "",
        roleDesc: "",
      },
      // 添加表单为空校验
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      // 编辑表单为空校验
      rules1: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      // tree选中的id数组
      ids: [],
      roleId: "", //角色id
    };
  },
  created() {
    // 获取所有权限
    this.$store.dispatch("getPermissions").then((res) => {
      if (res.meta.status == 200) {
        this.data = res.data;
      }
    });
    this.getList();
  },
  mounted() {},
  methods: {
    // 封装请求角色列表函数
    getList() {
      this.$store.dispatch("getRoles").then((res) => {
        if (res.meta.status == 200) {
          this.tableData = res.data;
        }
      });
    },
    // 弹出添加角色模态框
    add() {
      this.dialogVisible = true;
    },
    // 确认添加
    qAdd() {
      this.$store.dispatch("qAdd", this.ruleForm).then((res) => {
        if (res.meta.status == 201) {
          this.$message.success(res.meta.msg);
          this.dialogVisible = false;
          this.getList();
        }
      });
    },
    // 删除角色
    del(row) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("delRoles", row).then((res) => {
            if (res.meta.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    bj(row) {
      this.dialogVisible1 = true;
      this.ruleForm1 = row;
    },
    // 确认修改
    qEdit() {
      this.$store.dispatch("qEdit", this.ruleForm1).then((res) => {
        if (res.meta.status == 200) {
          this.dialogVisible1 = false;
          this.$message.success(res.meta.msg);
          this.getList();
        }
      });
    },
    // 分配权限模态框
    permissions(row) {
      this.dialogVisible2 = true;
      // 获取角色id
      this.roleId = row.id;
      let ids = [];
      function fn(row) {
        // 如果没有children直接把id放进数组里
        if (!row.children) {
          return ids.push(row.id);
        }
        row.children.forEach((item) => {
          fn(item);
        });
      }
      fn(row);
      this.ids = ids;
    },
    // 删除单个权限
    handleClose(tag, myid) {
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("delRolesPermissions", { tag: tag, myid: myid })
            .then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.getList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 确认更新角色权限
    qUpdate() {
      let AllCheck = this.$refs.tree.getCheckedKeys(); //通过key获取全部选中的节点
      let bCheck = this.$refs.tree.getHalfCheckedKeys(); //通过key获取半选中的节点
      this.$store
        .dispatch("qUpdate", {
          id: this.roleId,
          str: [...AllCheck, ...bCheck].join(","),
        })
        .then((res) => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.dialogVisible2 = false;
            this.getList();
          }
        });
    },
  },
};
</script>

<style scoped lang='scss'>
.d {
  display: flex;
  flex-wrap: wrap;
  .el-tag {
    margin: 10px;
  }
}
.el-row {
  .el-tag {
    margin: 10px;
  }
}
</style>
